import {Layout} from 'antd'
import styles from './header.less'
import {NavLink} from 'umi'
import Theme from '@/components/theme'
import Search from '@/components/search'
import { useEffect, useState } from 'react'
import { IRouteComponentProps, Link, useDispatch, useIntl,setLocale, getLocale} from 'umi'
import cls from 'classnames'

const {Header} = Layout;
const MyHeader: React.FC = ()=>{
    const dispatch = useDispatch()
    const [visible, showVisible] = useState(false)
    const [language,setlanguage]=useState(true)
    const intl = useIntl();
    const headerlist=[
      {
          to:'/article/article',
          text:intl.formatMessage({
              id:'article'
          })
      },
      {
          to:'/filing/filing',
          text:intl.formatMessage({
              id:'filing'
          })
      },
      {
          to:'/knowledge/knowledge',
          text:intl.formatMessage({
              id:'brochure'
          })
      },
      {
          to:'/messageboard/messageboard',
          text:intl.formatMessage({
              id:'board'
          })
      },
      {
          to:'/about/about',
          text:intl.formatMessage({
              id:"about"
          })
      }
  ]
  // 中英文转换
  useEffect(() => {
      dispatch({
          type:"index/changelanguage",
          payload:{
              language:language
          }    
      })
  }, [language])
    return  <Header className={styles.header}>
    <NavLink to="/">
      <img src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-logo.png" alt=""/>
    </NavLink>
    <div className={cls(styles.mobileNav, visible?styles.active:'')} onClick={()=>showVisible(!visible)}>
        <span className={styles.stick}></span>
        <span className={styles.stick}></span>
        <span className={styles.stick}></span>
    </div>
    <nav className={cls(visible?styles.mobileMenu:'')}>
      <ul>
         {
           headerlist.map((item,index)=>{
             return <li> <NavLink to={item.to}>   {item.text}  </NavLink></li>
           })
         }
      </ul>
      <div className={cls(styles.headersright)}>
        <span className={ language ? "iconfont icon-zhongyingwen2zhongwen" : "iconfont icon-zhongyingwenyingwen"}
        onClick={()=>{
                  setlanguage(!language)
                    setLocale(language?"en-US":"zh-CN",false)}}></span>
          <Theme />
          <Search />
      </div>
    </nav>
  </Header>
}

export default MyHeader;